<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>信息</title>
  <meta name="Description" content="鲸邻助贷" />
  <meta name="Keywords" content="鲸邻助贷" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="./js/newVant.js"></script>
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" type="text/css" href="./css/list.css" />
  <link rel="stylesheet" type="text/css" href="./css/base.css" />
  <script src="./js/jquery.js"></script>
  <script src="./js/message.js"></script>
  <style>
    .title {
      font-size: 18px;
      font-weight: bolder;
      margin: 10px 0;
      text-align: center;
    }

    .van-divider {
      margin: 10px 0;
    }
  </style>
</head>

<body>
  <div id="list">
    <div class="title">个人信息</div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-divider :style="{ color: '#426DFA', borderColor: '#426DFA', padding: '0 16px' }">
          个人信息
        </van-divider>
        <van-field readonly @click="pickerclick('type')" required v-model="form.typeName" name="客户类型" label="客户类型"
          placeholder="客户类型" :rules="[{ required: true, message: '请填写客户类型' }]"></van-field>
        <template v-if="form.type=='0'">
          <van-field required v-model="form.name" name="客户姓名" label="客户姓名" placeholder="客户姓名"
            :rules="[{ required: true, message: '请填写客户姓名' }]"></van-field>
          <van-field required v-model="form.phone" name="客户手机号" label="客户手机号" placeholder="客户手机号"
            :rules="[{ required: true, message: '请填写客户手机号' }]"></van-field>
          <van-field readonly @click="pickerclick('gender')" required v-model="form.gender" name="性别" label="性别"
            placeholder="性别" :rules="[{ required: true, message: '请填写性别' }]"></van-field>
          <van-field readonly @click="pickerclick('bornDate')" required v-model="form.bornDate" name="出生日期" label="出生日期"
            placeholder="出生日期" :rules="[{ required: true, message: '请填写出生日期' }]"></van-field>
          <van-field readonly @click="pickerclick('marryStatus')" required v-model="form.marryStatusName" name="婚姻情况"
            label="婚姻情况" placeholder="婚姻情况" :rules="[{ required: true, message: '请填写婚姻情况' }]"></van-field>
          <van-field readonly @click="pickerclick('education')" required v-model="form.educationName" name="最高学历"
            label="最高学历" placeholder="最高学历" :rules="[{ required: true, message: '请填写最高学历' }]"></van-field>
          <van-field readonly @click="pickerclick('jobType')" required v-model="form.jobTypeName" name="职业" label="职业"
            placeholder="职业" :rules="[{ required: true, message: '请填写职业' }]"></van-field>

          <van-field v-model="form.workYear" name="workYear" label="当前单位工龄" placeholder="当前单位工龄"
            :rules="[{ required: false, message: '请填写当前单位工龄' }]"></van-field>

          <van-field v-model="form.earningYear" required name="earningYear" label="年收入" placeholder="年收入"
            :rules="[{ required: true, message: '请填写年收入' }]"></van-field>

          <van-field readonly @click="pickerclick('liveStatus')" required v-model="form.liveStatusName"
            name="liveStatus" label="居住状态" placeholder="居住状态"
            :rules="[{ required: true, message: '请填写居住状态' }]"></van-field>
          <van-field readonly @click="pickerclick('city')" required v-model="form.city" name="city" label="城市"
            placeholder="城市" :rules="[{ required: true, message: '请填写城市' }]"></van-field>
          <van-field required v-model="form.address" name="address" label="详细地址" placeholder="详细地址"
            :rules="[{ required: true, message: '请填写详细地址' }]"></van-field>

          <van-field required v-model="form.wantAmount" name="wantAmount" label="意向金额" placeholder="意向金额"
            :rules="[{ required: true, message: '请填写意向金额' }]"></van-field>

          <van-field required v-model="form.wantTimeNumber" name="wantTimeNumber" label="意向期限" placeholder="意向期限"
            :rules="[{ required: true, message: '请填写意向期限' }]"></van-field>
          <van-field readonly @click="pickerclick('wantTimeType')" required v-model="form.wantTimeTypeName"
            name="wantTimeType" label="意向期限单位" placeholder="意向期限单位"
            :rules="[{ required: true, message: '请填写意向期限单位' }]"></van-field>
          <van-field required v-model="form.purpose" name="purpose" label="贷款目的" placeholder="贷款目的"
            :rules="[{ required: true, message: '请填写贷款目的' }]"></van-field>

          <van-field v-model="form.remark" name="remark" label="备注" placeholder="备注"
            :rules="[{ required: false, message: '请填写备注' }]"></van-field>

        </template>
        <template v-else>
          <van-field required v-model="form.name" name="name" label="客户姓名" placeholder="请输入客户姓名"
            :rules="[{ required: true, message: '请填写客户姓名' }]"></van-field>

          <van-field required v-model="form.phone" name="phone" label="联系电话" placeholder="请输入联系电话"
            :rules="[{ required: true, message: '请填写联系电话' }]"></van-field>

          <van-field required v-model="form.companyName" name="companyName" label="企业全称" placeholder="请输入企业全称"
            :rules="[{ required: true, message: '请填写企业全称' }]"></van-field>

          <van-field readonly @click="pickerclick('companyClassify')" required v-model="form.companyClassifyName"
            name="companyClassify" label="所属行业" placeholder="请输入所属行业"
            :rules="[{ required: true, message: '请填写所属行业' }]"></van-field>

          <van-field readonly @click="pickerclick('companyPeopleNumber')" required
            v-model="form.companyPeopleNumberName" name="companyPeopleNumber" label="企业规模" placeholder="请输入企业规模"
            :rules="[{ required: true, message: '请填写企业规模' }]"></van-field>

          <van-field required v-model="form.wantAmount" name="wantAmount" label="意向金额" placeholder="请输入意向金额"
            :rules="[{ required: true, message: '请填写意向金额' }]"></van-field>

          <van-field required v-model="form.wantTimeNumber" name="wantTimeNumber" label="意向期限" placeholder="意向期限"
            :rules="[{ required: true, message: '请填写意向期限' }]"></van-field>
          <van-field readonly @click="pickerclick('wantTimeType')" required v-model="form.wantTimeTypeName"
            name="wantTimeType" label="意向期限单位" placeholder="意向期限单位"
            :rules="[{ required: true, message: '请填写意向期限单位' }]"></van-field>

          <van-field required v-model="form.purpose" name="purpose" label="贷款目的" placeholder="贷款目的"
            :rules="[{ required: true, message: '请填写贷款目的' }]"></van-field>
          <van-field v-model="form.remark" name="remark" label="备注" placeholder="备注"
            :rules="[{ required: false, message: '请填写备注' }]"></van-field>
        </template>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>

      <van-popup v-model="showPicker1" position="bottom">
        <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" @confirm="onConfirm"
          @cancel="showPicker1 = false" />

      </van-popup>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker show-toolbar value-key="name" :columns="columns" @confirm="onConfirm"
          @cancel="showPicker = false" />

      </van-popup>
      <van-popup v-model="showPicker2" position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="columns2" @close="showPicker2 = false"
          @finish="onConfirm" :field-names="fieldNames" />
      </van-popup>
    </van-form>





  </div>
  <script src="js/jquery.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#list",
      name: "list",
      data: {
        listData1: [],
        listData2: [],
        listData3: [],
        active: 0,
        // baseUrl: "http://192.168.31.99:10248",
        // baseUrl: "https://api-ylc168.haichuang.pro",
        baseUrl: "/api",
        form: {
          type: '0',
          typeName: '个人客户',
          url: [],
        },
        uploader: [],
        type: "",
        typecolumns: [{
          name: "个人客户",
          id: "0",
        }, {
          name: "企业客户",
          id: "1",
        },],

        wantTimeTypecolumns: [{
          name: "年",
          id: "年",
        },
        {
          name: "月",
          id: "月",
        },
        {
          name: "日",
          id: "日",
        },
        ],
        // 年/月/日
        // 居住状态(0亲属楼宇 1共有住宅 2租房 3无自由住房 4砖房 5土胚房 
        // 6集体宿舍 7自置 8按揭 9未知)
        // 学历0初中及以下 1高中 2大专 3本科及以上
        // 职业身份(0在职 1学生 2退休人员 3无业)
        columns: [],
        columns1: [],
        columns2: [],
        showPicker: false,
        showPicker1: false,
        showPicker2: false,
        userId: "",
        nowType: "",
        currentDate: "",
        minDate: new Date(1950, 0, 1),
        cascaderValue: "",
        fieldNames: {
          text: 'label',
          value: 'value',
          children: 'children',
        },

      },
      created() {
        this.userId = this.GetQueryString("userId");
        // this.getDetail();
      },
      methods: {
        pickerclick(type) {
          this.nowType = type;
          if (this.nowType == 'type') {
            this.columns = this.typecolumns;
            this.showPicker = true

          } else if (this.nowType == 'gender') {
            this.getDict('sys_user_sex').then(res => {
              this.columns = res;
              this.showPicker = true
            })
          } else if (this.nowType == 'bornDate') {

            this.showPicker1 = true

          } else if (this.nowType == 'marryStatus') {
            this.getDict('sys_marry').then(res => {
              this.columns = res;
              this.showPicker = true
            })
          } else if (this.nowType == 'education') {
            this.getDict('sys_education').then(res => {
              this.columns = res;
              this.showPicker = true
            })

          } else if (this.nowType == 'jobType') {
            this.getDict('sys_job').then(res => {
              this.columns = res;
              this.showPicker = true
            })

          } else if (this.nowType == 'liveStatus') {
            this.getDict('live_status').then(res => {
              this.columns = res;
              this.showPicker = true
            })

          } else if (this.nowType == 'wantTimeType') {
            this.columns = this.wantTimeTypecolumns;
            this.showPicker = true

          } else if (this.nowType == 'companyClassify') {
            this.getDict('industry').then(res => {
              this.columns = res;
              this.showPicker = true
            })
          } else if (this.nowType == 'companyPeopleNumber') {
            this.getDict('enterprise_scale').then(res => {
              this.columns = res;
              this.showPicker = true
            })
          } else if (this.nowType == 'city') {
            this.getareaList().then(res => {
              this.columns2 = res;
              this.showPicker2 = true
            })
            // this.getDict('enterprise_scale').then(res => {
            //   this.columns = res;
            //   this.showPicker = true
            // })
          }



        },
        formatDate(date) {
          const year = date.getFullYear();
          const month = (date.getMonth() + 1).toString().padStart(2, '0');
          const day = date.getDate().toString().padStart(2, '0');
          return `${year}-${month}-${day} 00:00:00`;
        },
        onConfirm(data) {
          console.log("data", data)
          if (this.nowType == 'type') {
            this.form.typeName = data.name;
            this.form.type = data.id;
            this.showPicker = false
          } else if (this.nowType == 'gender') {
            this.form.gender = data.name;
            this.showPicker = false
          } else if (this.nowType == 'bornDate') {
            this.form.bornDate = this.formatDate(data);
            this.showPicker1 = false
          } else if (this.nowType == 'marryStatus') {
            this.form.marryStatusName = data.name;
            this.form.marryStatus = data.id;
            this.showPicker = false
          } else if (this.nowType == 'education') {
            this.form.educationName = data.name;
            this.form.education = data.id;
            this.showPicker = false
          } else if (this.nowType == 'jobType') {
            this.form.jobTypeName = data.name;
            this.form.jobType = data.id;
            this.showPicker = false
          } else if (this.nowType == 'liveStatus') {
            this.form.liveStatusName = data.name;
            this.form.liveStatus = data.id;
            this.showPicker = false
          } else if (this.nowType == 'wantTimeType') {
            this.form.wantTimeTypeName = data.name;
            this.showPicker = false
          } else if (this.nowType == 'companyClassify') {
            this.form.companyClassifyName = data.name;
            this.form.companyClassify = data.id;
            this.showPicker = false
          } else if (this.nowType == 'companyPeopleNumber') {
            this.form.companyPeopleNumberName = data.name;
            this.form.companyPeopleNumber = data.id;
            this.showPicker = false
          } else if (this.nowType == 'city') {
            this.form.city = data.selectedOptions[data.tabIndex].label;
            this.form.cityId = data.value;
            this.showPicker2 = false
          }
        },
        GetQueryString(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]); return null;
        },
        beforeDelete(data, index) {
          this.uploader.splice(index.index, 1);
          this.form.url.splice(index.index, 1);
        },
        afterRead(data) {
          // 上传附件
          var formdata = new FormData();
          formdata.append("file", data.file)
          $.ajax({
            type: "post",
            url: this.baseUrl + "/api/file/upload/img/img",
            contentType: false,
            processData: false,
            data: formdata,
            success: (res) => {
              if (res.errorCode == '00000') {
                this.form.url.push(res.data[0]);
              }
            },
          });
        },
        onSubmit() {
          $.ajax({
            type: "post",
            url: this.baseUrl + "/Clue/qrcodeAdd",
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            headers: {
              'Content-Type': 'application/json;charset=utf8',
            },
            data: JSON.stringify({ ...this.form, relUserId: this.userId }),
            success: (res) => {
              console.log("res", res)
              if (res.code == '200') {
                vant.Toast.success('提交成功');
                setTimeout(() => {
                  window.location.href = './result.html';
                }, 1500);
              }
            },
          });
        },
        getareaList(type) {
          return new Promise((resolve, reject) => {
            $.ajax({
              type: "get",
              url: this.baseUrl + `/area/tree`,
              dataType: "json",
              contentType: 'application/json; charset=utf-8',
              headers: {
                'Content-Type': 'application/json;charset=utf8',
              },
              success: (res) => {
                resolve(res.data.map((item) => {
                  if (item.label.includes("市")) {
                    // 将直辖市的 children 设置为包含其自身的数组
                    return {
                      ...item,
                      children: null
                    };
                  } else {
                    // 移除或忽略非直辖市的孙节点（children）及其以下层级
                    return {
                      ...item,
                      children: item.children
                        ? item.children.map((child) => ({
                          ...child,
                          children: null,
                        }))
                        : null,
                    };
                  }
                }));
              },
            });
          })
        },
        getDict(type) {
          return new Promise((resolve, reject) => {
            $.ajax({
              type: "get",
              url: this.baseUrl + `/system/dict/data/type/${type}`,
              dataType: "json",
              contentType: 'application/json; charset=utf-8',
              headers: {
                'Content-Type': 'application/json;charset=utf8',
              },
              success: (res) => {
                const processedData = res.data.map(item => {
                  return {
                    name: item.dictLabel,
                    id: item.dictValue
                  }
                })
                resolve(processedData);
              },
            });
          })
        },
        getDetail() {
          var that = this;
          $.ajax({
            type: "get",
            url: this.baseUrl + "/api/report/list",
            headers: {
              'Content-Type': 'application/json;charset=utf8',
            },
            success: function (res) {
              if (res.errorCode == '00000') {
                that.columns = res.data;
              }
            },
          });
        },
        toherf() {
          location.href = "https://download.ybylx.com";
        }

      }
    })
  </script>
</body>

</html>